<template>
  <!--
   * @FileDescription: 公共卡片标题
   * @author Sun Yan
   * @Date $
  -->
  <div class="module-card-title-container">
    <i class="module-card-title-container-icon"></i>
    <div class="module-card-title-container-text">
      <span class="title-text">{{ title }}</span>
      <slot name="title-right">
        <div v-if="useTime" class="title-right">
          <span class="hidden-md-and-up" @click="show = true">{{ changeTime ? changeTime : '选择日期'}}</span>
          <el-date-picker
              class="hidden-sm-and-down"
              style="width: 140px"
              v-model="changeTime"
              @change="onChange"
              @focus="onfocus"
              :picker-options="{disabledDate}"
              :clearable="false"
              @blur="onblur"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd">
          </el-date-picker>
          <i class="icon-iconfont icon-jiantou1" :class="timeState && 'spin'"></i>
        </div>
      </slot>
    </div>

    <van-calendar v-model="show"
                  :round="false"
                  position="right"
                  :max-date="new Date()"
                  :min-date="new Date(2020, 0, 1)"
                  @confirm="onConfirm" />

    <div class="module-card-title-container-slot">
      <slot></slot>
    </div>

  </div>
</template>
<script>
/**
 * @description: 方法描述
 * @param {参数类型} 参数名称
 * @param {参数类型} 参数名称
 * @return void
 */

import {DatePicker} from 'element-ui';
import {Calendar} from 'vant';

import {noop} from "@u";
// import ('vant/lib/calendar/index.css');
// import ('element-ui/lib/theme-chalk/date-picker.css')
export default {
  name: "module-card-title",
  components: {
    [DatePicker.name]: DatePicker,
    [Calendar.name]: Calendar,
  },
  props: {
    onChange: {
      type: Function,
      default: noop,
    },
    useTime: {
      type: Boolean,
      default: false
    },
    title: {
      type: String | Number,
      default: '人员分类'
    },
  },
  data() {
    return {
      changeTime: '',
      timeState: false,
      show: false,
    }
  },
  created() {

  },

  methods: {
    disabledDate(date) {
      //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
      return date.getTime() > Date.now();
    },
    onConfirm(e) {
      this.show = false;
      this.changeTime = new Date(e).Format('yyyy-MM-dd');
      this.onChange( this.changeTime );
    },
    onfocus() {
      this.timeState = true
    },
    onblur () {
      this.timeState = false
    }

  }
}
</script>

<style lang="scss">
.module-card-title-container {
  @include wh(100%, auto);
  position: relative;

  &-text {
    background-color: #051227;
    @include wh(100%, 32px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--mb-0-5);
    border: 1px solid $com-color-info-disable;
    clip-path: polygon(
            0 17px,
            29px 0,
            100% 0,
            100% calc(100% - 17px),
            100% 100%,
            0 100%
    );
    align-items: center;
    position: relative;
    padding-left: 3.5rem;


    &:after {
      content: ' ';
      position: absolute;
      left: 2.4rem;
      top: 12px;
      @include wh(6px, 6px);
      border-radius: $com-border-radius-circle;
      background: $com-color-white;
      z-index: var(--z-tooltip);
    }

    .title-text {
      width: 200px;
    }

    .title-right {
      width: 100px;
      height: 100%;
      display: flex;
      align-items: center;
      .el-date-editor {
        width: 100% !important;
        height: 100% !important;

      }
      .el-input__prefix {
        display: none;
      }
      .el-input__inner {
        text-align: left;
        @include wh;
        padding: 0 11px 0 0;
        background: transparent;
        border-color: transparent;
        color: $com-border-color;
        @extend %ellipsis;
      }

      .icon-jiantou1 {
        position: absolute;
        right: 6px;
        top: 6px;
        transition: .3s all;
        color: $com-border-color;
      }

      .spin {
        -webkit-transform: rotate(90deg);  /* to support Safari and Android browser */
        -ms-transform: rotate(90deg);      /* to support IE 9 */
        transform: rotate(90deg);
      }

    }
  }

  &:after {
    content: ' ';
    position: absolute;
    left: -1.7px;
    top: 8.5px;
    @include wh(32.5px, 1px);
    background: $com-color-info-disable;
    z-index: var(--z-tooltip);
    transform: rotate(330deg);
  }

  &-icon {
    position: absolute;
    left: .1rem;
    top: 0;
    display: block;
    @include wh(6px, 6px);
    border-radius: $com-border-radius-circle;
    border: 2px solid $com-color-bright;
    z-index: var(--z-tooltip);
  }
}
</style>